const staff_event_create = {
    template:`
 <div class="mt-2">
                        <h3 class="py-2">Create New Event</h3>
                        <div class="border-bottom"></div>
                        <div class="row border-bottom  flex-column">
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="">Name</label>
                                    <input type="text" class="form-control" v-model="form.name">
                                </div>
                                <div class="form-group">
                                    <label class="">Client</label>
                                    <select class="form-control" v-model="form.client_id">
                                        <option v-for="(item,index) in client" :key="index" :value="item.id">{{item.corporate_name}} - {{item.email}}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="">Address</label>
                                    <input type="text" class="form-control" v-model="form.address">
                                </div>
                                <div class="form-group">
                                    <label class="">Date</label>
                                    <input type="date" class="form-control" v-model="form.date">
                                </div>
                                <div class="form-group">
                                    <label class="">Type</label><br/>
                                    <label><input type="radio" name="type" value="Course" v-model="form.type" checked> Course</label><br/>
                                    <label><input type="radio" name="type" value="Training" v-model="form.type"> Training</label>
                                </div>
                                <div class="form-group">
                                    <label class="">Permission</label><br/>
                                    <label><input type="radio" name="permission" value="Public" v-model="form.permission"> Public</label><br/>
                                    <label><input type="radio" name="permission" value="Private" v-model="form.permission"> Private</label>
                                </div>
                                <div class="form-group">
                                    <label>Photo</label>
                                    <label for="upload-image" class="upload-image-label">
                                        <div class="border upload-image">
                                            <img :src="photo_preview">
                                            <span class="position-absolute">Choose Photo</span>
                                        </div>
                                        <input type="file" accept="image/*" id="upload-image" class="d-none" @change="preview_photo">
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Employee</label>
                                <button class="d-block text-primary border-primary btn">Add Employee</button>
                                <div class="mt-4">
                                    <div>
                                        <label>Selected</label>
                                        <ul class="employees">
                                            <li>
                                                <img src="employee.photo">
                                                <span> firstname lastname</span>
                                                <span class="text-secondary">scope</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="border-bottom"></div>
                                    <div>
                                        <label>Waiting for allocation</label>
                                        <ul class="employees">
                                            <li>
                                                <img src="employee.photo">
                                                <span>firstname lastname</span>
                                                <span class="text-secondary">employee.scope</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="my-3">
                            <button class="btn btn-primary">Submit</button>
                            <a class="text-primary mx-4">Cancel</a>
                        </div>
                    </div>    
    `,
    data() {
        return {
            form:{
                name:null,
                type:'Course',
                client_id:null,
                address:null,
                date:null,
                permission:'Public',
                employee_ids:null,
                photo:null
            },
            employees:[],
            clients:null,
            selected_employees:[],
            photo_preview:null,
        }
    },
    computed:{
        employee_ids(){
            let ids = [];
            for (let employee of this.selected_employees){
                ids.push(employee.id);
            }
            return JSON.stringify(ids);
        }
    },
    methods:{
        submit(){
            this.form.employee_ids = this.employee_ids;
            ajax.post(`event`,this.form).then(res =>{
                if (res.status === 200){
                    Bus.$emit('m','Create a new event success');
                    this.$router.push({name:'staff.event.detail',params:{event_id:res.data.data.id}});
                }
            })
        },
        get_employees(){
            ajax.get('employee').then(res =>{
                if (res.status === 200){
                    this.employees = res.data.data;
                }
            })
        },
        get_clients(){
            ajax.get('client').then(res =>{
                if (res.status === 200){
                    this.clients = res.data.data;
                }
            })
        },
        selected_employee(employee){
            let index = this.employees.indexOf(employee);
            this.selected_employees.push(employee);
            this.employees.splice(index,1);
        },
        unselected_employee(employee){
            let index = this.selected_employees.indexOf(employee);
            this.employees.push(employee);
            this.selected_employees.splice(index,1);
        },
        preview_photo(event){
            let file = event.currentTarget.files[0];
            this.form.photo = file;

            let reader = new FileReader();
            reader.onload = (event)=>{
                this.photo_preview = event.target.result;
            }

            reader.readAsDataURL(file);
        }
    },
    mounted() {
        this.get_events();
        this.get_employees();
    }
}